<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:新增提现
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->


<template>
	<view class="content">
		<view class="form-box">
			<view class="form-row">
				<view class="title">拥有金币</view>
				<view class="input">
					<text style="color:#FF9700; font-size: 48rpx;">{{goldinfo.money}} 金币</text>
				</view>
			</view>
			<view class="form-row">
				<view class="title">起提数量</view>
				<view class="input">
					<text style="color:#FF9700; font-size: 44rpx;">{{goldinfo.withdraw_min}} 金币</text>
				</view>
			</view>
			<view class="form-row">
				<view class="title">提现数量</view>
				<view class="input" style="display: flex; align-items: center;">
					<input style="width: 250rpx;" @input="inputNum" v-model="allData.num" type="number" />
					<text style="margin-left: 20rpx;;">约：{{cnynum}}元</text>
				</view>
			</view>
			
			<view class="form-row">
				<view class="title">银行名称</view>
				<view class="input">
					<input v-model="allData.bank"  disabled="disabled" type="text" />
				</view>
			</view>
			
			<view class="form-row">
				<view class="title">开户银行</view>
				<view class="input">
					<input v-model="allData.bankname"  disabled="disabled" type="text" />
				</view>
			</view>
			
			<view class="form-row">
				<view class="title">开户名称</view>
				<view class="input" style="display: flex; align-items: center;">
					<input v-model="allData.name" style="width: 250rpx;" type="text" />
					<view style="color: #007AFF;margin-left: 20rpx;" @click="selectCard()">选择账户</view>
				</view>
			</view>
			
			<view class="form-row">
				<view class="title">收款账号</view>
				<view class="input">
					<input v-model="allData.account" type="text" />
				</view>
			</view>
			
			<view class="form-row">
				<view class="title" style="letter-spacing: 12rpx;">验证码</view>
				<view class="input" style="display: flex; align-items: center;">
					<input v-model="allData.code" style="width: 200rpx;" type="number" />
					<view @click="sendSms()" style="color: #007AFF;margin-left: 20rpx;" v-if="time==0">获取验证码</view>
					<view v-else style="color: #cccccc;margin-left: 20rpx;">{{time}}秒后可重发</view>
				</view>
			</view>
		</view>
		
		
		<view class="button-box">
			<button type="primary" @click="addWithdraw()">提交申请</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goldinfo:{
					money:'',
					gold_rate:'',
					withdraw_min:''
				},
				allData:{
					num:'',
					bank:'支付宝',
					bankname:'支付宝',
					name:'',
					account:'',
					code:''
				},
				cnynum:'0',
				smsInterval:null,
				time:0
			}
		},
		onLoad() {
			this.$store.dispatch('selectCard',null);
			this.getGoldInfo();
		},
		onShow() {
			if(this.$store.state.selectedCard){
				var card = this.$store.state.selectedCard;
				this.$store.dispatch('selectCard',null);
				
				this.allData.bank = card.bank;
				this.allData.bankname = card.bankname;
				this.allData.name = card.name;
				this.allData.account = card.account;
			}
		},
		methods: {
			getGoldInfo(){
				this.$api.userGold().then((res)=>{
					if (res.data.code == 1) {
						uni.showToast({
							icon:"none",
							title: res.data.msg
						});
						return;
					}
					this.goldinfo = res.data.data;
				})
			},
			inputNum(event){
				var gold_rate = parseInt(this.goldinfo.gold_rate);
				var num = parseInt(event.target.value);
				if(!num) num = 0;
				if(gold_rate>0) this.cnynum = num/gold_rate;
			},
			sendSms(){
				uni.showLoading({
					title:"正在发送短信",
					mask:true
				});
				this.$api.getSmsCode().then((res)=>{
					uni.hideLoading();
					if (res.data.code == 1) {
						uni.showToast({
							icon:"none",
							title: res.data.msg
						});
						return;
					}
					uni.showToast({
						title:res.data.msg
					});
					this.time = 60;
					this.smsInterval = setInterval(() => {
						if (this.time > 0) {
							this.time--;
						} else {
							clearInterval(this.smsInterval);
							this.time = 0;
						}
					}, 1000);
				});
			},
			selectCard(){
				uni.navigateTo({
					url:"selectcard"
				})
			},
			addWithdraw(){
				uni.showLoading({
					mask:true,
					title:'正在提交...'
				});
				this.$api.addWithdraw(this.allData).then((res)=>{
					uni.hideLoading();
					if (res.data.code == 1) {
						uni.showToast({
							icon:"none",
							title: res.data.msg
						});
						return;
					}
					uni.showModal({
						title:"提示",
						content:res.data.msg,
						success() {
							uni.navigateBack({
								delta:1
							});
						}
					});
				})
			}
		}
	}
</script>

<style>
.content{
	padding-top: 40rpx;
}
.form-box{
	background: #FFFFFF;
	padding: 40rpx;
}
.form-row{
	display: flex;
	padding:20rpx 0px;
	font-size: 36rpx;
	align-items: center;
}
.form-row .title{
	color: #333333;
}
.form-row .input{
	margin-left: 20rpx;
}
.form-row .input input{
	width: 400rpx;
	border-radius: 40rpx;
	background:#D8D8D8;
	padding: 10rpx 40rpx;
}
.button-box{
	padding:40rpx;
}
</style>
